<template>
	<view class="h-full text-white" >
		<view id="headerHeight">
			<lz-navbar :title="$t('zichan.home')"></lz-navbar>
			<view class="p-4">
				<view class="flex justify-between text-base items-end">
					<view class="flex gap-2">
						<view>{{$t('zichan.zongziczh')+'(BTC)'}}</view>
						<view class="iconfont text-xl" :class="eye==true?'icon-yanjing':'icon-biyanjing'" @click="eye=!eye"></view>
					</view>
					<navigator url="/pages/template/wode/wode">
						<image src="/static/images/zichan/5.png" style="width: 20px;height: 20px;"></image>
					</navigator>
				</view>
				<view class="text-white text-2xl font-bold">{{eye==true?'0.00':'******'}}</view>
				<view style="color: #6fb58a;">≈{{eye==true?'0.00':'******'}}</view>
			</view>
			<view class="flex justify-around pb-4">
				<view v-for="(item,index) in iconList" :key="index" class="flex-1 flex justify-center items-center flex-col" @click="navigatorTo(item)">
					<image :src="item.icon" style="height: 25px;width: 25px;"></image>
					<view class="mt-1">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view v-if="headerHeight">
			<scroll-view style="width: 100%;" :style="{height:headerHeight}" scroll-y="true" refresher-enabled="true" :refresher-threshold="100" :refresher-triggered="refresher.triggered"
			refresher-background="#0d0d0d" @refresherrefresh="onRefresh">
				<view class="flex w-full px-2 mt-2">
					<u-tabs :list="tabs.list" :current="tabs.current" @click="clicktabs" :activeStyle="{color: '#fff'}"
					:inactiveStyle="{ color: '#888894' }" :itemStyle="{ height: '44px'}" 
					lineColor="#fff" lineWidth="0" lineHeight="0" style="width: 100%;"></u-tabs>
				</view>
				<!-- 幣幣賬戶 -->
				<view class="px-4 py-2 box-border" style="color: #888894;" v-if="tabs.current==0">
					<view class="rounded-md px-4 py-2 box-border" style="background-color:#242424;">
						<view class="text-xl text-white">≈{{eye==true?'0.00':'******'}}</view>
						<view>{{$t('zichan.zongziczh')+'(USDT)'}}</view>
					</view>
					<view class="py-2 flex justify-between items-center">
						<view class="border-b" style="border-color: #888894;width: 350rpx;">
							<u--input :placeholder="$t('zichan.sousuobizhong')" border="none" v-model="checkbox.value" @change="change" color="#888894" prefixIcon="search" placeholderStyle="color: #888894;font-size: 14px;" prefixIconStyle="font-size: 22px;color: #888894"></u--input>
						</view>
						<view>
							<u-checkbox-group v-model="checkbox.checked" placement="row" style="transform: scale(0.9);margin-left: -10px;">
								<u-checkbox :label="$t('zichan.yincang')+' 0 '+$t('zichan.yuezichan')" name="1111" labelColor="#fff" ></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<view>
						<view class="flex justify-between p-2" style="color: #9FA6B5;">
							<view style="width: 240rpx;">{{$t('zichan.mingcheng')}}</view>
							<view style="width: 80rpx;">{{$t('heyue.keyong')}}</view>
							<view class="text-right" style="width: 120rpx;">{{$t('zichan.dongjie')}}</view>
							<view class="text-right" style="width: 140rpx;">{{$t('zichan.zhehe')+'(USD)'}}</view>
						</view>
						<view class="flex justify-between p-2 text-white" v-for="(item,index) in pageList" :key="index">
							<view class="flex items-center text-xl gap-1" style="width: 240rpx;">
								<image :src="item.icon" style="width: 20px;height: 20px;"></image>
								{{item.name}}
							</view>
							<view style="width: 80rpx;">{{item.num}}</view>
							<view class="text-right" style="width: 120rpx;">{{item.num2}}</view>
							<view class="text-right" style="width: 140rpx;">{{item.num3}}</view>
						</view>
					</view>
				</view>
				<!-- 合約賬戶 -->
				<view class="px-4 py-2 box-border" style="color: #888894;" v-if="tabs.current==1">
					<view class="rounded-md p-4 box-border" style="background-color:#242424;">
						<view class="flex justify-between">
							<view>USDT</view>
							<view class="flex text-white">{{$t('zichan.heyuezhanghu')}}<u-icon name="arrow-right" size="20" color="#fff"></u-icon></view>
						</view>
						<view class="mt-8 text-white">
							<view class="text-xl">0.00</view>
							<navigator url="/pages/template/transfer/transfer">
								<view class="flex gap-2 mt-1">
									<view class="iconfont icon-qiehuan" style="color: #3269eb;" @click=""></view>
									{{$t('zichan.huazhuan')}}
								</view>
							</navigator>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 弹出层 -->
		<lz-popup ref="lzpopup" :title="$t('bibi.home')+$t('bibi.jiaoyi')"></lz-popup>
		
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		components: {
		},
		data() {
			return {
				headerHeight:'',
				eye:true,// 眼睛是否睁开
				// 下拉刷新
				refresher:{
					_freshing:false,
					triggered:false
				},
				iconList:[
					{name:this.$t('zichan.chongbi'),icon:'/static/images/zichan/1.png',path:'/pages/template/chongbi/chongbi'},
					{name:this.$t('zichan.zhuanyi'),icon:'/static/images/zichan/2.png',path:'/pages/template/zhuanyi/zhuanyi'},
					{name:this.$t('zichan.huazhuan'),icon:'/static/images/zichan/3.png',path:'/pages/template/transfer/transfer'},
					{name:this.$t('zichan.zhangdan'),icon:'/static/images/zichan/4.png',path:'/pages/template/dingdanguanli/dingdanguanli'},
				],
				// 分类
				tabs:{
					current:0,
					list:[{name:this.$t('zichan.bibizhanghu'),index:0 },{name: this.$t('zichan.heyuezhanghu'),index:1}]
				},
				// 复选框
				checkbox:{
					value:'',
					checked:[]
				},
				pageList:[
					{name:'USDT',icon:'/static/logo.png',num:0.00,num2:0,num3:0.00},
					{name:'USDT',icon:'/static/logo.png',num:0.00,num2:0,num3:0.00},
					{name:'USDT',icon:'/static/logo.png',num:0.00,num2:0,num3:0.00},
					{name:'USDT',icon:'/static/logo.png',num:0.00,num2:0,num3:0.00},
					{name:'USDT',icon:'/static/logo.png',num:0.00,num2:0,num3:0.00},
					{name:'USDT',icon:'/static/logo.png',num:0.00,num2:0,num3:0.00},
					{name:'USDT',icon:'/static/logo.png',num:0.00,num2:0,num3:0.00},
					{name:'USDT',icon:'/static/logo.png',num:0.00,num2:0,num3:0.00},
				]
			}
		},
		onLoad(op) {
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select("#headerHeight").boundingClientRect((data) => {
			    console.log("得到布局位置信息" + JSON.stringify(data),this.$u.sys());
				this.headerHeight = this.$u.sys().windowHeight - data.height +'px'
				console.log(this.headerHeight);
			}).exec();
		},
		methods: {
			clicktabs(item) {
				console.log('item', item);
				this.tabs.current = item.index
			},
			//下拉刷新
			onRefresh(){
				if (this.refresher._freshing) return;  
				this.refresher._freshing = true;  
				if (!this.refresher.triggered)//界面下拉触发，triggered可能不是true，要设为true  
				this.refresher.triggered = true;  
				setTimeout(() => {
					this.refresher.triggered = false;
					this.refresher._freshing = false;
				},1000)
			},
			navigatorTo(item){
				uni.navigateTo({
					url:item.path,
				});
			}
		}
	}
</script>

<style lang="scss">
</style>